<template>
  <div class="bg">
    <div class="loginCard">
      <div class="loginArea">
        <div class="title">
          <div class="logo">
            <img src="@/assets/img/logo.png">
            <div class="logoTitle">
              <div class="name">{{title}}</div>
              <div class="e_name">Management System</div>
            </div>
          </div>
          <div class="welcome">
            <span>Hello,</span>
            <span>Welcome back.</span>
          </div>
        </div>
        <div class="loginForm">
          <el-form
            :model="loginForm"
            ref="loginForm"
            :rules="loginFormRules"
          >
            <el-form-item prop="username">
              <el-input
                placeholder="请输入账号"
                v-model="loginForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="loginForm.password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input
                placeholder="请输入验证码"
                v-model="loginForm.code"
              >
                <div
                  slot="append"
                  @click="getAuthImg"
                  v-show="!imgUrl"
                  style="padding:0 20px;"
                >获取验证码</div>
                <div
                  slot="append"
                  v-show="imgUrl"
                  style="width: 10vh;height: 4vh;"
                >
                  <img
                    :src="imgUrl"
                    slot="append"
                    style="height: 100%;width: 100%;"
                    @click="getAuthImg"
                  >
                </div>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btnArea">
          <el-button
            type="primary"
            round
            @click="loginSubmit('loginForm')"
          >登录</el-button>
        </div>
      </div>
      <!-- 右侧背景 -->
      <div class="loginBg">
        <div class="gradient"></div>
      </div>
    </div>

    <div class="icp">
      <a
        href="https://beian.miit.gov.cn/"
        target="_blank"
      >粤ICP备2023139252号-3</a>
    </div>
  </div>
</template>

<script>
import { userLogin, getMenu, getUserInfo } from '@/api'
import { http } from '@/settings.js'
export default {
  name: 'Login',
  data () {
    return {
      title: process.env.VUE_APP_TITLE,
      loginForm: { // 登录表单
        username: null,
        password: null,
        code: null
      },
      imgUrl: '', // 图片验证码
      loginFormRules: { // 登录表单校验
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
      },
    }
  },
  created () {
    // 按 Enter 键登录系统
    document.onkeydown = (e) => {
      e = window.event || e;
      if (this.$route.path === "/login" && e.keyCode === 13) this.loginSubmit('loginForm'); // submitLoginForm() 为登录函数
    };
  },
  methods: {
    getAuthImg () { // 获取图片验证码
      if (!this.loginForm.username) {
        this.$message.error('请输入账号');
      } else {
        this.$axios({
          url: http + "/auth/loginAuthImg?phone=" + this.loginForm.username,
          method: "get",
          responseType: "blob",
        }).then(({ data }) => {
          const myBlob = new window.Blob([data], { type: "image/jpeg" });
          this.imgUrl = window.URL.createObjectURL(myBlob);
        });
      }
    },
    loginSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          userLogin(this.loginForm).then(res => {
            if (res.code === '000000') {
              window.sessionStorage.setItem('token', res.data.token_head + res.data.access_token)
              this.$router.push('/')
            } else {
              this.getAuthImg()
              this.loginForm.code = ''
            }
          })
        } else {
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.bg {
  .icp {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 50px;
  }

  // width: 100%;
  // height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginCard {
    width: 60%;
    height: 65%;
    border-radius: 15px;
    background-color: #fff;
    transition: all 0.2s ease-in;
    box-shadow: 0 0 15px 5px rgb(230, 230, 230);
    display: flex;
    overflow: hidden;
    .loginArea {
      width: 45%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .title {
        width: 68%;
        height: 30%;
        .logo {
          width: 100%;
          height: 30%;
          display: flex;
          align-items: center;
          img {
            height: 4em;
            width: 4em;
          }
          .logoTitle {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .name {
              color: #3498fa;
              font-weight: bold;
              font-size: 1.1em;
              letter-spacing: 5px;
            }
            .e_name {
              color: #3498fa;
              font-size: 0.8em;
              letter-spacing: 3px;
            }
          }
        }
        .welcome {
          width: 100%;
          height: 70%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          span {
            margin: 3px 0;
            width: 80%;
            color: #3498fa;
            font-weight: bold;
            font-size: 1em;
            letter-spacing: 4px;
          }
        }
      }
      .loginForm {
        width: 68%;
        height: 35%;
        display: flex;
        align-items: center;
        .el-form {
          width: 100%;
          :deep(.el-input__inner) {
            border-radius: 0;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 1px;
            padding: 0;
          }
          :deep(.el-input-group__append) {
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            background-color: #409eff;
            color: #fff;
            padding: 0;
          }
        }
      }
      .btnArea {
        display: flex;
        justify-content: center;
        width: 68%;
        margin-top: 10px;
        .el-button {
          width: 80%;
        }
      }
    }
    .loginBg {
      width: 55%;
      height: 100%;
      background-image: url("@/assets/img/login/bg.jpg");
      background-size: cover;
      background-repeat: no-repeat;

      .gradient {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to left,
          rgba(80, 80, 80, 0.7),
          rgba(255, 255, 255, 0.2)
        );
      }
    }
  }
  .loginCard:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0 0 15px 5px rgb(202, 200, 200);
  }
}
</style>